در این بخش از آموزش css ، انتخابگرها  را برای شما نام می بریم.

از جمله مواردی که سی اس اس در اختیار شما می گذارد تعیین انتخابگرهایی به نام class و id می باشد.در اینجا انواع انتخابگرها را برای شما توضیح می دهیم.
class : عناصری که به آنها این دستور وارد شده را به style مورد نظر تبدیل میکند.
#id : عناصری که دستور id=name را  دارند را به style موزد ظنر تبدیل می کند.
* : همه ی عناصر را انتخاب می کند و دستورات مورد نظر را اعمال میکند.
 element : تگ های <p> را انتخاب میکند و دستورات مورد نظر را در آنها اعمال می کند.
 elementءelement : تگ های p , h1 را انتخاب میکند و style موردنظر را در آنها اعمال می کند.
element element : همه ی تگهای p که داخل تگ div قرار گرفته اند را انتخاب می کند و دستور مورد نظر را در آنها اعمال می کند.
element>element : تگ ها p که داخل تگ div می باشند و داخل این تگ ها به وجود آمده اند را انتخاب می کند و style موردنظر را به اعمال می کند.
element+element : تگ های p که بلافاصله پپس از تگ div قرار گرفته اند را انتخاب می کند و دستورات مورد نظر را به انها اعمال می کند.

attribute : تگ های a که ویژگی target را داشته باشند را انتخاب کرده و style مورد نظر را به آن اعمال می کند.

 attribute=value: تگ های a که ویژگی target=_blank را داشته باشند را انتخاب می کند و style مورد نظر را به آن اعمال می کند.

attribute~=value : تگ های a که ویژگی title=pars را دارند را انتخاب کرده و style مورد نظر را به آن اعمال می کند.
attribute|=value : این انتخابگر عناصری که ویژگی lang آنها با fa شروع میشود را انتخاب کرده و style موردنظر را بر روی آن اعمال می کند.

link : این انتخابگر تگ های a ای را که روی آنها کلیک نشده است را انتخا کرده و style موردنظر را به آن اعمال می کند.
visited : گ های a ای که روی آن کلیک شده باشد را انتخاب کرده و style موزدنظر را بر روی آن اعمال میکند.
 hover:تگ های a ای که با ماوس روی آن ها میروید را انتخاب می کند و دستورات موردنظر را به آن اعمال می کند.
focus:همه ی تگ های input را انتخاب کرده و دستور موردنظر را اجرا می کند.

first-letter : این انتخابگر اولین حرف تگ p را انتخاب کرده و دستور مورد نظر را به آن اعمال می کند.مواردی که می تواند در first-letter مورداستفاده قرار داد عبارتند از:

  √  font properties
  √  color properties
  √  background properties
  √  margin properties
  √  padding properties
  √  border properties
  √  text-decoration
  √  vertical-align (only if float is 'none')
  √  text-transform
  √  line-height
  √  float
  √  clear

first-line : این انتخابگر اولین خط از تگ p را انتخاب می کند و style مورد نظر را به آن اعمال می کند.first-line شامل ویژگی هایی می باشد که عبارتند از :

 √  font properties
  √  color properties
  √  background properties
  √  word-spacing
  √  letter-spacing
  √  vertical-align
  √  text-decoration
  √  text-transform
  √  line-height
  √  clear

first-child : این انتخابگر تمام تگ های p را انتخاب می کند و دستور مورد نظر را به آن اعمال می کند.

before : به اول تمامی تگ های p لینک http://sitedesign-co.ir را اضافه می کند.

after : بعد تگ های p لینک http://sitedesign-co.ir را اضافه می کند.

lang : این انتخابگر تمام تگ های p که با ویژگی lang=it شروع می شوند ر انتخاب کرده و دستورات مورد نظر را به آنها اعمال می کند.

element1~element2 : تمام تگ های ul که والد مشترکی با تگ p دارند را انتخاب می کند و دستورات را در آن ها اعمال می کند.

attribute^=value : تمام تگ های div که با ویژگی class=test شروع میشوند را انتخاب کرده و style موردنظر را به آنها اعمال می کند.
attribute$=value : تمام تگ ها ی div که با ویژگی class=test  هستند را انتخاب می کند و style مورد نظر را به آنها اعمال می کند.
attribute*=value : این انتخابگر تگ های div که ویژگی class=test را شامل می شود را انتخاب کرده و style موردنظر را به آن اعمال می کند.

first-of-type : اولین تگ p را انتخاب کرده و سپس دستور مورد نظر را در آن اعمال می کند.
last-of-type : این انتخابگر آخرین تگ p را انتخاب کرده و  دستورات مدنظر را در آن اعمال می کند.
only-of-type : این انتخابگر تگ p را که only child  والد خود باشد را انتخاب می کند و style موردنظر را به آن اعمال می کند.
()nth-child : تگ های p که دومین فرزند والد خود باشد را انتخاب کرده و دستور موردنظر را به آن اعمال می کند.

()nth-last-child : هر تگ <p>  که دومین فرزند (only child) والد (parent) خود از آخر باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.
()nth-of-type : هر تگ <p>  که دومین تگ <p> از والد (parent) خود  باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.
()nth-last-of-type : هر تگ <p>  که دومین تگ <p> از والد (parent) خود از آخر باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.
last-child :  برای هر تگ <p>  که آخرین فرزند (child) از والد (parent) خود  باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.
root : تمامی تگ های html را انتخاب می کند و style مورد نظر را به آن اعمال می کند.

empty :  هر تگ <p>  که محتوایی نداشته باشد را  انتخاب و style مورد نظر را به آنها اعمال میکند.
enabled : تمام تگ های <input>  که  "type="text باشند و فعال باشند را  انتخاب و style مورد نظر را به آنها اعمال میکند.

disabled : تمام تگ های <input>  که  "type="text باشند وغیر فعال باشند را  انتخاب و style مورد نظر را به آنها اعمال میکند.
checked : تمام تگ های <input>  که  "type="checked باشند را  انتخاب و style مورد نظر را به آنها اعمال میکند. 
not :  تمامی تگ ها جز  تگ <p>  را  انتخاب و style مورد نظر را به آنها اعمال میکند.
selection : متن هایی که با دوبار کلیک کردن بر آنها انتخاب میشوند ، style مورد نظر را به آنها اعمال میکند.

در این قسمت از آموزش css می خواهیم ایجاد یک نمودار برای محتوای پویا را با استفاده از css توضیح دهیم.

توجه داشته باشید که کدهای پایین را در قسمت head از صفحه html خود وارد کنید.(یا اینکه این کدها رو به فایل css خود وارد کنید.) برای ایجاد این نوع نموادرها می توانید از دستورات زیر استفاده کنید:

<style>
  
.container{
 width:300px;
 font-family: Arial;
 }
  
.record{
 float: left;
 width: 100%;
 border: 1px solid #ccc;
 background-color: #f0f0f0;
 margin-bottom: 2px;
 -moz-border-radius: 0px 10px 10px 0px;
 -moz-border-radius: 0px 10px 10px 0px;
 }
  
.bar {
 background: transparent url(gradient.png) repeat-x top left;
 float: left;
 clear: left;
 height: 30px;
 }
  
.bar span{
 font-size: 12px;
 font-weight: bold;
 color: #fff;
 float: left;
 margin-left: 5px;
 margin-top: 7px;
 }
  
.p{
 padding-top: 3px;
 float: right;
 color: #6D8591;
 clear: right;
 font-size: 12px;
 font-weight: bold;
 height: 25px;
 }
  
.p span{
 font-size: 12px;
 font-weight: bold;
 float: left;
 margin-right: 5px;
 margin-top: 5px;
 }
  
</style><br><br>

توجه داشته باشید که در ابتدا ما یک container ایجاد میکنیم که نمودار و تمام رکوردهای ما را نگه خواهد داشت.عرض اون میتواند با توجه به نیاز شما تغییر کند.در اینجا ما عرض رکوردها رو به درصد تعیین کرده ایم.شما میتونید از این نمودار زیبا در محتوای پویا استفاده کنید.(در پیشرفت پروژه, میزان فعالیت ها در سایت,..., هر آنچه که در یک سایت نیاز به نمودار دارد.)

کدهای html که توضیح داده شد و باید در فایل html ما قرار گیرند:

<div class="container">
 <div class="record"><div class="bar" style="width:55%;"><span>Mozilla</span></div><div class="p"><span>55%</span></div></div>
 <div class="record"><div class="bar" style="width:30%;"><span>IE</span></div><div class="p"><span>30%</span></div></div>
 <div class="record"><div class="bar" style="width:22%;"><span>Safari</span></div><div class="p"><span>22%</span></div></div>
 <div class="record"><div class="bar" style="width:20%;"><span>Opera</span></div><div class="p"><span>20%</span></div></div>
</div>

 دراین قسمت از آموزش css می خواهیم روش هایی را توضیح دهیم که به وسیله ی آن بتوانید از اشکالی که می خواهید استفاده کنید .
با یادگیری این موارد می توانید در طراحی سایت خوب یکی از بهترین ها باشید ی زرا ایجاد شکل در طراحی بسیار مهم و برای کاربر جالب می باشد . در ابتدا از اشکال ساده ای مثل مربع و مستطیل استفاده می کنیم . دستور زیر شکل کلی رسم مربع یا مستطیل را نمایش می دهد.دقت شود که هر نامی را میتوان در بخش id در نظر گرفت اما برای مفهومی تر بودن بهتر است اسمهای با معنی را در نظر بگیرید.توجه داشته باشید که عرض را با width و طول را با height نمایش می دهیم و رنگ لازم را مشخص می کنیم .

#square {
width: 100px;
height: 100px;
background: #555;
}

همچنین برای رسم دایره از border-radius برای تبدیل گوشه های تیز مربع یا مستطیل به صورت گرد استفاده می کنیم و دستور کلی آن به این شکل می باشد .

#circle {
width: 100px;
height: 100px;
background: #555;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
}

دقت شود که در کدهای قالب از کد <div id="square"></div> استفاده شود . و در بقیه موارد نیز همچنین.
( -moz-برای نمایش صحیح کد در فایرفاکس، -webkit- برای نمایش صحیح در کروم،  -o- نمایش صحیح در اپرا )

از آنجاییکه رسم بیضی مانند زسم دایره می باشد و فقط طول و عرض آن را تغییر می دهیم .مانند دستور زیر:

#oval {
width: 200px;
height: 100px;
background: #555;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

برای نمایش شکل قلب نیز از دستور زیر استفاده می شود .

#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before, #heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #666;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
} #heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}

همچنین در پایان نمایش کادرهای گفتگو در سایت می توان از دستور زیر استفاده کرد :

#talkbubble {
width: 120px;
height: 80px;
background: #666;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid #666;
border-bottom: 13px solid transparent;
}

همچنین می توان برای رسم مثلث می توان از دستور زیر استفاده کرد :

.triangle{
width:0;
height:0;
border-bottom:100px solid red;
border-left:50px solid transparent;
border-right:50px solid transparent;
}

 

خاصیت clear

در این قسمت از آموزش css  ، خاصیت Clear  و خاصیت Float را توضیح می دهیم.

با استفاده ازخاصیت clear می توان کناره هایی از عنصر را که می خواهیم متن یا عکس در آن سمت قرار نگیرد را مشخص می کنیم،در واقع از این خاصیت برای خالی کردن فضای اطراف یک عنصر استفاده می شود.که حالت های مختلفی دارد که تعدادی از انها توضیح می دهیم.
none:در دو طرف عنصر مجاز است که عکس یا متن قرار بگیرد که حالت پیش فرض می باشد.

right:در سمت راست هیچ عکس و تنی نمی تواند قرار گیرد.

left:در سمت چت هیچ عکس و متنی نمی تواند قرار گیرد.

both:دو طرف عنصر هیچ عکس و متنی نمی تواند قرار گیرد.

مثال زیر خاصیت Clear را در بخش آموزش css نشان می دهد.

img
{
float:left;
}
p.clear
{
clear:both;
}

ویژگی float

با استفاده از خاصیت float می توان موقعیت یک عنصر را به سمت چپ یا راست تنظیم کرد.خاصیت float از مهمترین ویژگی ها در Css و همچنین طراحی سایت می باشد.این خاصیت وقتی عمل می کند که به عنصر مورد نظر خاصیت موردنظر خود را بدهید.

مثال زیر کاربرد خاصیت Float را نشان می دهد.

.text 
{float:left;
width:110px;
height:90px;
margin:5px;}

در این قسمت از آموزش CSS ، ویژگی Font-Variant را برای شما توضیح می دهیم.
یکی دیگر از ویژگی های Font ویژگی Font-Variant می باشد.ویژگی Font-Variant نوشته را به صورت معمولی و یا حروف بزرگ نمایش می دهد.

مثال زیر کاربرد ویژگی Font-Variant را در بخش آموزش Css نشان می دهد.

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
</style>
</head>

<body>
<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>
</body>

</html>

خروجی:

My name is Hege Refsnes.

MY NAME IS HEGE REFSNES.

در این قسمت از آموزش CSS ، ویژگی Font-Style را برای شما توضیح می دهیم.
ویژگی Font-Style برای نمایش جلوه های نمایشی به متن استفاده می شود که شامل سه حالت می باشد که عبارتند از:
Normal : متن موردنظر بدون هیچ جلوه ی ویژه نمایش داده می شود که این حالت به صورت پیش فرض می باشد.
Italic : متن بصورت خط کج نمایش داده می شود.
Oblique : متن به صورت مورت نمایش داده می شود.

مثال زیر کاربرد ویژگی Font-Style را در آموزش Css نشان می دهد.

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>

<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>

</html>

خروجی:

This is a paragraph, normal.

This is a paragraph, italic.

This is a paragraph, oblique.

در این قسمت از آموزش CSS ، ویژگی Font-Style را برای شما توضیح می دهیم.
ویژگی Font-Style برای نمایش جلوه های نمایشی به متن استفاده می شود که شامل سه حالت می باشد که عبارتند از:
Normal : متن موردنظر بدون هیچ جلوه ی ویژه نمایش داده می شود که این حالت به صورت پیش فرض می باشد.
Italic : متن بصورت خط کج نمایش داده می شود.
Oblique : متن به صورت مورت نمایش داده می شود.

مثال زیر کاربرد ویژگی Font-Style را در آموزش Css نشان می دهد.

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>

<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>

</html>

خروجی:

This is a paragraph, normal.

This is a paragraph, italic.

This is a paragraph, oblique.

در این قسمت از آموزش CSS ، ویژگی Font-Strecth را برای شما توضیح می دهیم.
از ویژگی Font-Strecth برای متراکم کردن یا کشیده شدن کلمات در متن استفاده می شود .این ویژگی از مررگرهای اینترنت اکسپلورر،فایرفاکس و netscape پشتیبانی نمیکند.

در این قسمت از آموزش CSS ، ویژگی Font-Size را برای شما توضیح می دهیم.
با استفاده از ویژگی Font-Size سایز قلم متن را انتخاب می کنند.این خاصیت دارای حالت های مختلفی می باشد که عبارتنداز:
Xx-Small : این قلم سایز متن نوشته شده را به صورت خیلی کوچک قرار می دهد.
X-Small : این قلم سایز متن نوشته شده را به صورت کمی کوچک درمی آورد.
Small : با استفاده از این قلم سایز نوشته کوچک می شود.
Medium : این قلم سایز متن را متوسط نشان می دهد.
Large : این قلم سایز نوشته را  بزرگ نشان می دهد.
X-Large : این قلم سایز نوشته را کمی بزرگ نشان می دهد.
Xx-Large : اندازه ی قلم بسیار بزرگ می شود.
Larger : سایز متن نوشته شده نسبت به سایز خطوط همجوار کمی بزرگتر دیده می شود
Smaller : سایز متن نوشته شده نسبت به سایر خطوط همجوار کمی کوچکتر دیده می شود.
Length : این حالت اندازه ی قلم متن را بر حسب واحدی مانند پیکسل و یا نقطه (pt) تعیین می کند.
درصد % : این حالت اندازه قلم متن را  نسبت به عنصر مادر و یا حالت استاندارد،برحسب درصد تعیین می کند.

مثال زیر کاربرد ویژگی Font-Size را در بخش آموزش Css نشان می دهد.

< p style="color: Maroon; font-family: Arial" >
   < span style="font-size: small ; color : green" > This part has a small font < /span > 
   < span style="font-size: medium ; color : blue" > This part has a medium font < /span >
   < span style="font-size: x-large color : red" > This part has a big font < /span > 
   < span style="font-size: 20px; color: Navy" > And size of font of this is 20px . < /span >
< /p >

خروجی:

This part has a small font 
This part has a medium font 
This part has a big font 

در این قسمت از آموزش CSS ، ویژگی Table-Layout را برای شما توضیح می دهیم.
ویژگی Table-Layout الگوریتم نمایش جدول را نشان می دهد.این ویژگی دارای دو الگوریتم برای طراحی جدول می باشد که عبارتند از :
الگوریتم نمایش اتوماتیک-Auto : این الگوریتم عرض ستون های جدول برحسب محتویات درونی آنها را تنظیم می کند .این الوریتم جدول ها را کمی کند عمل می کند زیرا ابتدا باید محتویات جدول را پردازش کند.
الگوریتم نمایش ثابت-Fixed : در این الگوریتم عرض و ارتفاع جدول و همچنین خانه های آن را برحسب مقادیر تعیین شده توسط کاربر تنظیم می کند و به محتویات درونی آن ها توجهی ندارد بنابراین سرعت پردازش آن بیشتر می باشد.

برچسب: نویسنده: سرباز وطنم تاريخ: دوشنبه 26 آبان 1393 ساعت: 4:48